<template>
  <div class="pageDiv">
    <!-- 歌手封面 -->
     <div class="sheetImg">
        <img src="https://p1.music.126.net/ifFRy9us25sstBRkkeUNaA==/109951165816497396.jpg?param=1024y1024" alt="">
        <div class="sheetMsg">
        <h1 class="sheetTitle">KEY.L刘聪</h1>
        <p class="msc">艺人</p>
        <div>
            <span>75首歌·</span><span>38张专辑·</span><span>24个MV</span>
        </div>
        <p class="tip">歌手简介：<span>
                                Key to Love
                    混迹长沙的创作歌手。
                    SUP_MUSIC创始人之一。
                    C-BLOCK成员之一。 在Trap横行的年代，KEY.L选择把Trap的精髓抽离出来，而不是一味跟风。
                    一路在C-BLOCK打磨，不管是自成一派的江湖style还是道系style，KEY.L一直做着街头的音乐。 2019.1.11号发行首张个人专辑「KEY to L」
                    这把钥匙已经开启新的旅程 【微博】：刘聪的KEY 2019.1.11 发行首张个人专辑 「KEY to L」
                    2020.10.10 发行第二张个人专辑「街区故事」 KEY.L刘聪 如货币般流通
                    2021年，获得硬地围炉夜·网易云音乐原创盛典“最受欢迎男音乐人奖”
                    2021年8月12日，参演音乐节目《披荆斩棘的哥哥》
        </span>
        </p>
        <div class="btnDiv">
            <a-button class="btn" size="large"><play-circle-outlined />播放</a-button>
            <a-button class="btn" size="large"><heart-outlined />关注</a-button>
        </div>
        </div>
     </div>
     <!-- 最新发布 -->
     <div>
        <h1>最新发布</h1>
        <a-row>
            <a-col></a-col>
        </a-row>
        <h1>热门歌曲</h1>
        <a-row>
            <a-col></a-col>
        </a-row>
        <h1>MV</h1>
        <a-row>
            <a-col></a-col>
        </a-row>
        <h1>相似歌手</h1>
        <a-row>
            <a-col></a-col>
        </a-row>
    </div>
  </div>
</template>


<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
import {PlayCircleOutlined,HeartOutlined} from '@ant-design/icons-vue';

  export default defineComponent({
     name:"app",
     components:{PlayCircleOutlined,HeartOutlined},
     setup(){
      return{
        
      }
     }
  })
</script>

<style lang="less" scoped>
.sheetImg{
    display: flex;
    border-bottom: 2px solid rgb(224, 223, 223) ;
    img{
        width: 16vw;
        height: 32vh;
        border-radius: 50%;
    }
    .sheetMsg{
        margin-top: 2%;
        margin-left: 5%;
        
        .sheetTitle{
            font-size: 40px;
            font-weight: 900;
        }
        .msc{
            font-size: 24px;
        }
        .artice{
            font-weight: 700;
        }
        .tip{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .btnDiv{
            margin-top: 3%;
            margin-left: 4%;
            margin-bottom: 4%;
            .btn{
                width: 10vw;
                margin-right: 1rem;
            }
        }
    }
}

</style>
